<template>
  <div id="barEchart" ></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    ID:{
      type: String,
    },
    barObj: {
      type: Object,
      required: true,
      default: () => {
        return {
          name: [],
          data: [],
        };
      },
    },
  },
  data() {
    return {
      barChart: null,
    };
  },
  watch: {
    barObj: {
      deep: true,
      handler(newVal) {
        this.barEchartfn();
      },
    },
  },
  mounted() {
    this.barEchartfn();
    let _this = this;
    window.addEventListener("resize", function () {
      // console.log(" _this.barChart", _this.barChart)
      _this.barChart.resize();
    });
  },
  methods: {
    barEchartfn() {
      let _this = this;
      var bar = document.getElementById(this.ID);
      // var bar = document.getElementById("CEMSbarEchart");
      this.barChart = echarts.init(bar);
      var optionBar = {
        // title: {
        //   text: `${this.barObj[0].name} \n  \n ${this.barObj[0].value}(元)` ,
        //   left: 'center',
        //   top: 'center'
        // },
       tooltip: {
         trigger: 'item'
       },
       legend: {
         orient: 'vertical',//设置上下排列
         top: '5%',
         left: 'left',
         itemGap: 10,
           // 设置每个图例项的图标形状
         itemStyle: {
           // borderWidth: 2,
           // borderColor: '#000',  // 图标边框颜色
         },
         formatter:  (name)=> {
           for (let index = 0; index < this.barObj.length;index++) {
             if(this.barObj[index].name==name){
              if(name.indexOf("未回款")!="-1"){
                return  `${name}  ${this.barObj[index].value}(单)`
              }else if(name.indexOf("未发货")!="-1"||name.indexOf("未销售")!="-1"){
                return  `${name}  ${this.barObj[index].value}(单)`
              }else {
                return  `${name}  ${this.barObj[index].value}`
              }
             }
           }
         }
       },
       
       series: [
       {
       type: 'pie',
       radius: ['55%', '70%'],
       avoidLabelOverlap: false,
       label: {
         show: false,
         position: 'center',
         formatter: (params) => {
              // 设置默认显示第一个数据,函数接收一个参数，拿到所有配置项，遍历所有配置项，判断,下标为0的，第一个配置项信息，return 出去设置为默认值。
              // console.log(params);
              if(params.data.name.indexOf("未回款")!="-1"){
                return  `${params.data.name} \n  \n ${params.data.value}(单)`
              }else if(params.data.name.indexOf("未发货")!="-1"||params.data.name.indexOf("未销售")!="-1"){
                return  `${params.data.name} \n  \n ${params.data.value}(单)`
              }else {
                return  `${params.data.name} \n  \n ${params.data.value}`
              }
          },
       },
       emphasis: {
         label: {
           show: true,
           fontSize: 20,
           fontWeight: 'bold',
          }
       },
       labelLine: {
         show: false
       },
       data:this.barObj,
     }
       ]
   };
      optionBar && this.barChart.setOption(optionBar);
      // this.barChart.dispatchAction({type:"highlight",dataIndex:0});
      // this.barChart.on("mouseover",(e)=>{
      //   if(e.dataIndex!==0){
      //     this.barChart.dispatchAction({type:"downplay",dataIndex:0})
      //   }
      // })
    },
  },
};
</script>
<style scoped>
#barEchart {
  width: 100%;
  height: 100%;
}
</style>
